<template>
    <div>
      <h2>天数据</h2>
      <div id="dayEcharts"> </div>
  </div>
  </template>
  <script setup lang = "ts">
  import { dayDataApi } from '@/services/database';
import * as echarts from 'echarts';
  import { ref, onMounted ,reactive} from 'vue';
  
  const chart = ref<echarts.ECharts | null>(null);
  onMounted(async() => {
    const chartContainer = document.getElementById('dayEcharts');
    //后台请求数据
    const weeksdata = reactive({})
      
        const ret = await dayDataApi()
        // const days = data.map(item => item.day);
        const day = ret.data.data1.map((item:any)=>item.day)
        const day1data = ret.data.data1.map((item:any)=>item.value)
        const day2data = ret.data.data2.map((item:any)=>item.value)
        console.log(day);
        console.log(day1data);
  
        if (chartContainer) {
    chart.value = echarts.init(chartContainer);

    const options = {
      xAxis: {
        data: day
      },
      yAxis: {},
      series: [
        {
          data: day1data,
          type: 'line',
          stack: 'x'
        },
        {
          data: day2data,
          type: 'line',
          stack: 'x'
        }
      ]
    };

    if (chart.value) {
      chart.value.setOption(options);
    }
    }
  });
  
  </script>
  <style lang= "scss" scoped>
  #dayEcharts {
    width: 100%;
    height: 400px;
  }
  </style>